<template>
	<view v-if="show">
		<form @submit="formSubmit">
			<view class="content">
				<view class="item">
					<view class="label">
						收货人
					</view>
					<view class="input">
						<input name="name" type="text" placeholder="请输入你的名字" v-model="detail.name" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						手机号码
					</view>
					<view class="input">
						<input name="phone" type="number" placeholder="请输入手机号码" v-model="detail.phone" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						所在地区
					</view>
					<view class="input" :class="{'gray':address == '请选择地址'}">
						<!-- <input type="text" placeholder="请选择你的地区" /> -->
						<pickerAddress :address-value="addressId" @change="change">{{address}}</pickerAddress>
					</view>
					<!-- <uni-icons type="location-filled" size="20" color="#35D14A"></uni-icons> -->
				</view>

				<view class="item align-start">
					<view class="label">
						详细地址
					</view>
					<view class="input">
						<textarea name="detail" id="" cols="10" rows="10" placeholder="请输入详细地址"
							v-model="detail.detail"></textarea>
					</view>
				</view>

				<view class="default">
					<view class="label">
						默认收货地址
					</view>
					<view class="check" @click="defaultClick">
						<image src="../../../static/icon/method_checked.png" mode="" v-if="is_default == 1"></image>
						<image src="../../../static/icon/method_check.png" mode="" v-else></image>
					</view>
				</view>
			</view>

			<view class="add-address">
				<button class="add-btn" form-type="submit">
					保存
				</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				id: 0,
				detail: {},
				addressId: {},
				address: '请选择地址',
				is_default: 1,
				error: '',
			}
		},
		onLoad(options) {
			this.id = options.id

			this.getDetail()
		},
		methods: {
			getDetail() {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true

				})
				_this.$api.post('mall.address/detail', {
					id: _this.id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.detail = res.data.detail
						_this.addressId.provinceId = _this.detail.province_id
						_this.addressId.cityId = _this.detail.city_id
						_this.addressId.areaId = _this.detail.region_id
						_this.is_default = _this.detail.isdefault
						console.log(_this.is_default)
						_this.show = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}, fail => {})
			},
			/**
			 * (没有选择地址)或者(修改地址)，点击picker重新选择并重新赋值
			 * @param {Object} data 子组件传回来的值
			 */
			change(data) {
				this.addressId.provinceId = data.provinceId
				this.addressId.cityId = data.cityId
				this.addressId.areaId = data.areaId
				// join()数组转变为字符串，用括号内的符号分割
				this.address = data.data.join(' ')
			},
			defaultClick() {
				this.is_default = this.is_default ? 0 : 1
			},
			formSubmit(e) {
				let _this = this
				let values = e.detail.value

				// 表单验证
				if (!_this.validation(values)) {
					_this.toast(_this.error)
					return false
				}

				values.province_id = _this.addressId.provinceId
				values.city_id = _this.addressId.cityId
				values.area_id = _this.addressId.areaId
				values.isdefault = _this.is_default
				values.id = _this.detail.address_id

				uni.showLoading({
					title: '提交中...',
					mask: true
				})

				_this.$api.post('mall.address/edit', values).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.toast('保存成功')
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						_this.toast(res.msg)
					}
				}, fail => {})
			},
			validation: function(values) {
				if (values.name === '') {
					this.error = '收件人不能为空';
					return false;
				}
				if (values.phone.length < 1) {
					this.error = '手机号不能为空';
					return false;
				}
				if (values.phone.length !== 11) {
					this.error = '手机号长度有误';
					return false;
				}
				let reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!reg.test(values.phone)) {
					this.error = '手机号不符合要求';
					return false;
				}
				if (this.address === '请选择地址') {
					this.error = '请选择所在地区';
					return false;
				}
				if (values.detail === '') {
					this.error = '详细地址不能为空';
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.gray {
		color: #6f6f6f;
	}

	.align-start {
		align-items: flex-start !important;
	}

	.content {
		margin-top: 26rpx;
		padding: 8rpx 34rpx;
		background-color: #FFFFFF;

		.item {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
			display: flex;
			align-items: center;
			position: relative;

			.label {
				width: 30%;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.input {
				width: calc(100vw - 50%);
				font-size: 28rpx;

				input {
					font-size: 28rpx;
				}

				textarea {
					width: 300rpx;
					height: 150rpx;
					font-size: 28rpx;
				}
			}
		}

		.default {
			padding: 30rpx 0 72rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				width: 30%;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}

			.check {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.add-address {
		width: 100%;
		position: fixed;
		bottom: 60rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		.add-btn {
			width: 80%;
			background: #000000;
			border-radius: 50rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 10rpx 0;
			text-align: center;
		}
	}
</style>